<template>
  <div>
    <!-- 写死字符串，  -->
    <h1 v-color="'red'">hello vue</h1>
    <h1 v-color="'pink'">hello vue</h1>
    <h1 v-color="'skyblue'">hello vue</h1>
    <!-- 绑定变量 -->
    <h1 v-color="wordColor">hello vue</h1>
    <button @click="wordColor = 'red'">修改颜色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wordColor: "green",
    };
  },

  // 👎👎👎了解-局部注册
  directives: {
    // 自定义指令名称
    color: {
      //  * 作用： 在指令所在的标签， 插入dom时，自动执行的一个函数
      //  * 注意：💥 只会在第一次执行
      //  * el： 所在标签的dom元素
      //  * xxx: 指令接收到的数据， 组成的一个对象
      //  */
      inserted(el, xxx) {
        el.style.color = xxx.value;
      },

      /**
       * 作用：在指令接收到的数据, 变化时自动执行
       * el： 所在标签的dom元素
       * xxx: 指令接收到的数据， 组成的一个对象
       */
      update(el, xxx) {
        el.style.color = xxx.value;
      },
    },
  },
};
</script>

<style></style>
